/**
 * 公共底部导航
 *
 * 自定义函数命名规则小驼峰
 */
function fixBottomNav(name = "home") {
  //默认是首页
  //创建div
  const div = document.createElement("div");

  //添加类名
  div.className = `foot dpflex`;

  //添加HTML内容
  div.innerHTML = `
  <li>
  <a href="./home.html" class="nav-link ${name === "home" ? "active" : ""} ">
      <span class="iconfont icon-home"></span>
      <p>首页</p>
      </a>
  </li>
  <li>
  <a href="./exerciserun.html" class="nav-link ${name === "sport" ? "active" : ""} ">
    <span class="iconfont icon-running1"></span>
    <p>运动</p>
  </a>
  </li>
  <li>
  <a href="./attention.html" class="nav-link ${name === "attention" ? "active" : ""} ">
  <span class="iconfont icon-CircleofFriends"></span>
  <p>圈子</p>
      </a>
  </li>
  <li>
  <a href="./main.html" class="nav-link ${name === "main" ? "active" : ""} ">
  <span class="iconfont icon-my"></span>
  <p>我的</p>
  </a>
  </li>
  `;
  //将div追加到body中
  document.body.append(div);
}

/**
 * 公共头部导航
 *
 * 自定义函数命名规则小驼峰
 */

// 运动头部导航函数
function sportTopNav(name = "exerciserun") {
  //创建一个节点
  let header = document.createElement("header");
  //添加class
  header.className = "sport-top-nav";
  //添加html内容
  header.innerHTML = `
  <nav>
  <a href="./exerciserun.html" class="${name == 'exerciserun' ? 'active' : ''}">跑步</a>
  <a href="./exerciseriding.html" class="${name == 'exerciseriding' ? 'active' : ''}">骑行</a>
  <a href="./Trainingcourse.html" class="${name == 'Trainingcourse' ? 'active' : ''}">课程训练</a>
  </nav>
  `;

  //追加到body中

  /*
  append 追加到父元素最后面
  prepend 追加到父元素最前面
  */
  document.body.prepend(header)

}
//导出对象 暴露对象
module.exports = {
  fixBottomNav,
  sportTopNav
};
